<template>
  <div class="warpper-box inductionInfo">
    <a-card style="margin-top: 10px;">
      <a-form layout="inline" :form="events_form">
        <a-form-item label="姓名">
          <a-input placeholder="姓名" v-decorator="['name']"></a-input>
        </a-form-item>
        <a-form-item label="审核人姓名">
          <a-input placeholder="审核人姓名" v-decorator="['disabledName']"></a-input>
        </a-form-item>
        <a-form-item label="企业名称">
          <a-input placeholder="企业名称" v-decorator="['enterpriseName']"></a-input>
        </a-form-item>
        <a-form-item label="考勤状态">
          <a-select v-decorator="['attendanceStatus']" style="width: 200px;" placeholder="状态">
            <a-select-option :key="1">
              正常
            </a-select-option>
            <a-select-option :key="2">
              迟到
            </a-select-option>
            <a-select-option :key="3">
              早退
            </a-select-option>
            <a-select-option :key="4">
              事假
            </a-select-option>
            <a-select-option :key="5">
              调休假
            </a-select-option>
            <a-select-option :key="6">
              旷工
            </a-select-option>
            <a-select-option :key="7">
              正常上班
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="审核人员姓名">
          <a-input placeholder="审核人员姓名" v-decorator="['disabledName']"></a-input>
        </a-form-item>
        <a-form-item label="审核状态">
          <a-select v-decorator="['examineStatus']" style="width: 200px;" placeholder="状态">
            <a-select-option :key="1">
              通过
            </a-select-option>
            <a-select-option :key="2">
              不通过
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="审核时间">
          <a-range-picker v-model="rangeDate" @change="rangeChange" valueFormat="YYYY-MM-DD"></a-range-picker>
        </a-form-item>
        <a-form-item>
          <a-button type='primary' @click="loadTable(true)">查询</a-button>
          <a-button type='primary' @click="reset">重置</a-button>
          <a-button type="danger" @click="downTempTable">下载模版</a-button>
          <a-button type="primary" @click="importTable">导入</a-button>
          <a-button type="warning" @click="exportTable">导出</a-button>
          <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ref="fileExcel"
            @change="importTableHandle" style="display: none;" />
        </a-form-item>
      </a-form>
    </a-card>
    <a-card style="margin-top: 10px;">
      <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
        @change="handleTableChange" rowKey="id">
        <!-- 操作栏-->
        <span slot="action" slot-scope="text, record">
          <!-- 编辑模块 | 字段 -->
          <a @click="$refs.createInfo.add(record)">编辑</a>
          <span>
            <a-divider type="vertical" />
            <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" @confirm="remove(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </span>
      </a-table>
    </a-card>
    <add-info ref="createInfo" @on-ok="addLoad"></add-info>
  </div>
</template>

<script>

import store from '@/store'
import AddInfo from "./attendance_add.vue"
import {
  COLUMNS_ATTENDANCE
} from "./form"
import {
  getPageDisabledAttendance,
  importDisabledDetail,
  deleteAttendance,
  downTemplate,
  exportDisabledAttendance
} from "@/api/human/disabled"
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'inductionList',
  components: {
    AddInfo
  },
  data() {
    return {
      table: {
        columns: COLUMNS_ATTENDANCE,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
          showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },

      rangeDate: [], // 日期范围
      examineStartTime: "",
      examineEndTime: "",
      staffId: "",
    }
  },
  filters: {
    filterMore(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  activated() {
    this.staffId = this.$route.query.staffId || "";
    this.loadTable(true);
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {

  },
  methods: {
    // 日期选择
    rangeChange(e) {
      this.examineStartTime = e[0];
      this.examineEndTime = e[1];
    },
    // 获取企业员工列表
    async loadTable(flag) {
      let params = this.events_form.getFieldsValue();
      params.examineStartTime = this.examineStartTime;
      params.examineEndTime = this.examineEndTime;
      params.staffId = this.staffId;
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await getPageDisabledAttendance(params);
      if (code == '1') {
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    // 导入表单
    importTable() {
      this.$refs.fileExcel.click();
    },
    async importTableHandle(e) {
      e.preventDefault();
      let _this = this;
      let file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.name.indexOf('.xls') === -1) {
        _this.$message.error("只支持xlsx");
        e.target.value = "";
        return;
      }
      if (!(file.size / 1024 / 1024 < 20)) {
        _this.$message.error('模版大小不能超过 20MB!');
        e.target.value = "";
        return;
      }
      e.target.value = "";
      if (file) {
        let formData = new FormData();
        formData.append("templateType", 1);
        formData.append("file", file);
        const { code } = await importDisabledDetail(formData);
        if (code == '1') {
          this.$message.success('操作成功');
          this.loadTable(true);
        }
      }
    },
    // 下载功能
    downTempTable() {
      let params = this.events_form.getFieldsValue();
      params.examineStartTime = this.examineStartTime;
      params.examineEndTime = this.examineEndTime;
      params.templateType = 1;
      downTemplate(params).then(res => {
        const blob = new Blob([res]);
        const fileName = '考勤管理模版.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    // 导出功能
    exportTable() {
      let params = this.events_form.getFieldsValue();
      params.examineStartTime = this.examineStartTime;
      params.examineEndTime = this.examineEndTime;
      exportDisabledAttendance(params).then(res => {
        const blob = new Blob([res]);
        const fileName = '考勤管理.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },

    // 删除列表数据
    async remove(item) {
      let params = {
        id: item.id
      }
      const {
        code
      } = await deleteAttendance(params);
      if (code == '1') {
        this.$message.success('删除成功');
        this.loadTable(true);
      }
    },
    addLoad() {
      this.loadTable(true);
    },
    reset() {
      this.events_form.resetFields();
      this.rangeDate = [];
      this.examineStartTime = "";
      this.examineEndTime = "";
      this.loadTable(true);
    },
  }
}
</script>
